第三週 - 響應式網頁設計

Posted on | In

小知識

  • 設計師用 1920px開版，只是想要模擬滿版，並非container 是1920
  • 常見container 大小：1400、 1200、 1280
  • 肉眼一次看到的文字大概落在25 - 40字
  • flex 小撇步
    • 適合不規則：改變 flex-direction: row ⇒ column
    • 有固定規則：wrap 搭配 %
  • % 是看父層級的寬度，也就是上一層的寬度當基準

環境建立

  • meta 不加UTF-8，在有些瀏覽器下，中文會呈現亂碼

  • viewport 設定 ⇒ 螢幕解析度的Reset

    1
    2
    3
    4
    5
    // 做響應式必加
    // 螢幕解析度 = 螢幕寬度 (width=device-width)
    "viewport" content="width=device-width, initial-scale=1.0">

    // content 細節設定 => user-scalable \ maximum-scale \ minimum-scale

  • RWD CSS 必須設定

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /* rwd img css，可當作是 CSS Reset 其中一個 */
    img{
      max-width: 100%;
      height: auto;
    }

    /* 全域 border box */

    *,*::before,*::after{
      box-sizing: border-box;
    }

斷點規劃

  • 先寫PC版型，再依序往下寫響應式設計

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    /*先寫PC版型，再依序往下寫響應式設計*/
    .title{
      color: red;
    }
    .content{
      color: black;
    }
    /*在 iPad 直式下變更樣式*/
    /* 768以下，這範圍的code會被打開 */
    // 如果是剛好768 就是吃藍色
    @media(max-width:768px){
      .title{
        color: blue;
      }
      .content{
        font-size: 30px;
      }
    }
    /*在 iPhone11 直式下變更樣式 */
    @media(max-width: 375px){
      .title{
        color: yellow;
      }
    }

  • 幾個設定檔案，就有幾個斷點

  • 斷點除錯工具

  • 範例

    • PC - 1200px
    • iPad - 768px
    • iPad以下 - 767px
    • iPhone 6 Plus - 414px (視專案族群)
    • iPhone 6 - 375px (視專案族群)
    • iPhone 5、SE - 320px

CSS 權重

先看權重，再看先後
分數是會累加的

  • HTML 標籤：1 分
  • class 選擇器：10 分
  • ID 選擇器：100 分
    • 不要用id 切版
  • inline style：1000 分
    • 常用在給js操作用
    • 暴力的寫法
  • !important：10000 分